<template>
  <NvCrud :option :data :pagination />
</template>

<script setup lang="tsx">
import type { PaginationProps } from 'naive-ui'
import type { NvCrudOption } from 'nv-crud'
import { NTag } from 'naive-ui'
import { NvCrud } from 'nv-crud'
import { reactive } from 'vue'

const pagination = reactive<PaginationProps>({
  page: 1,
  pageSize: 3,
  onUpdatePage: (page) => {
    pagination.page = page
  },
})

const data = [
  { key: 0, name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', tags: ['nice', 'developer'] },
  { key: 1, name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', tags: ['wow'] },
  { key: 2, name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', tags: ['cool', 'teacher'] },
]

const option: NvCrudOption = {
  expansion: {
    expandable: rowData => rowData.name !== 'Jim Green',
    renderExpand: (rowData) => {
      return `${rowData.name} is a good guy.`
    },
  },
  rowActions: false,
  actionbar: false,
  toolbar: false,
  fields: {
    name: { title: 'Name' },
    age: { title: 'Age' },
    tags: {
      title: 'Tags',
      render({ rowData }) {
        const tags = rowData.tags.map((tagKey: string) => {
          return <NTag type="info" bordered={false} style={{ marginRight: '6px' }}>{tagKey}</NTag>
        })
        return tags
      },
    },
  },
}
</script>
